<template>
  <div>
        <div class="mustReadBackgroundImg">
            <img src="../../assets/rankLogo1.jpeg" alt="" />
            <div class="ruleBox">
                <span class="MRBI_Text">基于必读票,评价维度综合评选,每月10日发榜</span>
                <span class="rule">详细规则<span class="iconfont icon-youjiantou1 yjt"></span></span>
            </div>
        </div>
        <div class="mustReadRank">
            <div class="mustReadcontainer">
                <div class="AllTitle">
                    <span>12月·七猫必读榜</span>
                    <!-- <span class="intactList">历届必读榜<span class="iconfont icon-youjiantou yyjt"></span></span> -->
                </div>
                <!-- <div class="mustReadList" v-for="(item,index) in booklist[3].list" :key="booklist[3].list[index].id"> -->
                <router-link class="mustReadList" v-for="(item,index) in booklist[3].list.slice(0,3)" :key="booklist[3].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[3].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+1}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <!-- </div> -->
                <router-link class="mustReadList" v-for="(item,index) in booklist[4].list.slice(0,3)" :key="booklist[4].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[4].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+4}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <router-link class="mustReadList" v-for="(item,index) in booklist[5].list.slice(0,3)" :key="booklist[5].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[5].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+7}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <router-link class="mustReadList" v-for="(item,index) in booklist[6].list.slice(0,3)" :key="booklist[6].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[6].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+10}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <router-link class="mustReadList" v-for="(item,index) in booklist[7].list.slice(0,3)" :key="booklist[7].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[7].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+13}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <router-link class="mustReadList" v-for="(item,index) in booklist[8].list.slice(0,3)" :key="booklist[8].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[8].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+16}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
                <router-link class="mustReadList" v-for="(item,index) in booklist[9].list.slice(0,3)" :key="booklist[9].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[9].list[index].id">
                    <div class="MRL_ranking">
                        <span>{{index+19}}</span>
                    </div>
                    <div class="MRL_Content" >
                        <div class="upperPart">
                            <div class="MRLC_Img">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="MRLC_Text">
                                <p class="MRLCT_name">{{item.title}}</p>
                                <p class="MRLCT_writer">{{item.author}}</p>
                                <p class="MRLCT_Tag">{{item.category}}·连载·841万字</p>
                            </div>
                            <div class="MRLC_grade">
                                <div class="MRLC_grade_Box">
                                    <div class="MRLCG_Img">
                                        <img src="../../assets/Tagbg.jpeg" alt="">
                                    </div>
                                    <div class="MRLCG_Text">
                                        <p class="MRLCGT_score">98.0</p>
                                        <p>必读指数</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="nextPart">
                            <div class="nextPart_Img">
                                <img src="../../assets/bidu.jpeg" alt="">
                            </div>
                            <div class="nextPart_Text">
                                <span>{{item.recomContent}}</span>
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
            
        </div>
        <!-- <div class="mustReadRankBottom"> -->
        <!-- <router-link class="mustReadRankBottom" tag="div" to="/mustRead/mustReadRankList">
            <span>更多榜单</span><span class="iconfont icon-youjiantou1"></span>
        </router-link> -->
        <!-- </div> -->
  </div>
</template>

<script>
import { getStoreNavi,getStoreShow } from '../../api/bookCity';
export default {
    data(){
        return{
            StoreNaviID:null,
            booklist:[],
        }
    },
    methods:{
        // 书城导航接口
        getStoreNaviFun(){
            getStoreNavi().then(data=>{
                console.log("书城导航模块",data)
                this.StoreNaviID = data.data.navi[3].id;
                console.log(this.StoreNaviID)
            })
        },
        // 书城展示模块
        getStoreShowFun(){
            getStoreShow({"uuid":this.StoreNaviID}).then(data=>{
                console.log("书城展示模块",data)
                this.booklist = [];
                this.booklist = data.data.list;
                console.log(this.booklist)
            })
        },
    },
    created(){
        this.getStoreNaviFun();
        this.getStoreShowFun();
    }
}
</script>

<style lang="less">
.AllTitle{
    line-height: 65px;
    font-weight: bold;
    font-size: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span.intactList{
        font-size: 13px;
        .yyjt{
            padding-left: 5px;
            font-size: 13px;
        }
    }
}
.mustReadcontainer{
    width: 89%;
    margin: 0px auto;
}
.mustReadBackgroundImg{
    width: 100%;
    position: relative;
    color: #624811;
    img{
        width: 100%;
    }
    div.ruleBox{
        position:absolute;
        bottom: 0px;
        padding: 6px 34px;
        font-size: 12px;
        span.MRBI_Text{
            padding-right: 5px;
            border-right: 1px solid #624811;
        }
        span.rule{
            padding-left: 5px;
            span.yjt{
                font-size: 12px;
            }
        }
    }

}
.mustReadRank{
    background-color: #fff;
    .mustReadList{
        display: flex;
        // align-items: center;
        position: relative;
        .MRL_ranking{
            position: absolute;
            top: 0px;
            left: -5px;
            line-height: 90px;
            width: 10%;
            z-index: 2;
            span{
                background-color: #fee450;
                font-weight: bold;
                padding: 2px 6px;
                border-radius: 50%;
            }
        }
        .MRL_Content{
            width: 90%;
            padding-top: 10px;
            padding-bottom: 25px;
            padding-left: 30px;
            .upperPart{
                display: flex;
                position: relative;
                margin-bottom: 10px;
                .MRLC_Img{
                    width: 60px;
                    height: 80px;
                    background-color: pink;
                    margin-right: 13px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .MRLC_Text{
                    padding-top: 5px;
                    line-height: 23px;
                    .MRLCT_name{
                        font-weight: bold;
                    }
                    .MRLCT_writer{
                        color: #aaa;
                        font-size: 14px;
                    }
                    .MRLCT_Tag{
                        color: #aaa;
                        font-size: 14px;
                    }
                }
                .MRLC_grade{
                    position: absolute;
                    right: 0px;
                    top: 0px;
                    .MRLC_grade_Box{
                        position: relative;
                        .MRLCG_Img{
                            width: 55px;
                            height: 62px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .MRLCG_Text{
                            width: 55px;
                            position: absolute;
                            top: 10px;
                            right: 0px;
                            text-align: center;
                            p{
                                font-size: 12px;
                                color: #a39072;
                            }
                            p.MRLCGT_score{
                                font-size: 18px;
                                font-weight: bold;
                            }
                        }
                    }
                    
                }
            }
            .nextPart{
                display: flex;
                align-items: center;
                .nextPart_Img{
                    width: 65px;
                    height: 15px;
                    margin-right: 8px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .nextPart_Text{
                    width: 75%;
                    font-size: 14px;
                    color: #aaa;
                    line-height: 16px;
                    span{
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
                }
            }
        }
    }
    
}
.mustReadRankBottom{
    border-top: 1px solid #eee;
    font-size: 14px;
    text-align: center;
    line-height: 60px;
    color: #f6bf60;
    background-color: #fff;
}
</style>